Lesson 2: Stylizing a Navigation Menu with CSS

Overview

In the previous lesson, you learned about controlling the layout of a web page using CSS. One of the techniques you learned was floating content so that elements appear beside one another. In the current lesson you will apply these techniques to stylizing your navigation menu.

Learner Outcomes

At the completion of this exercise:

you will be able to use a variety of CSS properties to make an unordered list look like a navigation menu.

Activities

Open your portfolio's external style sheet in a text editor, and your portfolio home page in a browser. After each step listed below, save your style sheet, then refresh your page in the browser to see what effect the change has had.
In your external style sheet, create a new section at the end of your CSS file to keep all the styles related to the navigation menu together. You can do this by adding a comment to the end of the file, like this:
```
  /* navigation menu styles */
```
Then, all styles related to the navigation menu will go after this comment. NOTE: Each of the style definitions that follow is unique. The selectors are similar, but if you look closely at them you'll see that they actually refer to distinct elements. So be sure to include each of these definitions in your style sheet.
The navigation menu is contained within div#navigation, but most of the elements we need to stylize are contained inside that div. To stylize them, we can use descendant selectors, which were defined in the lesson on Id and Class. To start with, we can remove the bullets from the unordered list, like this:
```
div#navigation ul { 
  list-style-type: none;
}
```
Next, float all list items to the left, just like you did with the .info divs in the previous lesson. While you're at it, you might want to add a margin to the right of each list item so they're not all squished together:
```
div#navigation ul li { 
  float: left;
  margin-right: 0.5em;
}
```

Next stylize the anchors (links) that are nested inside the list items. The style you add here makes the list items look like menu buttons. The following styles are an example, but feel free to tweak these styles and come up with your own unique menu style:

div#navigation ul li a { 
  padding: 0.25em 1em;
  text-decoration: none; /* no underline */
  background-color: #EBF5FF; /* pale bluish white */
  color: #4312AE; /* dark blue */
  border: 2px solid black;
  border-top-left-radius: 1em 1em; /* rounded corner! */
  border-top-right-radius: 1em 1em; /* another rounded corner! */	 
}

Now add :hover and :focus pseudo-classes so the menu items change color when users point or tab to them:

div#navigation ul li a:hover, div#navigation ul li a:focus { 
  color: black; 
  background-color: white; 
  font-weight: bold;
}

You might also need to adjust the parent container, div#navigation to make the menu fit better.
Finally, to prevent side effects from all those floated elements, add clear:left to the style definition for div#main, since that's the content that immediately follows the navigation menu.

Handouts/Online Documents

CSS Reference from W3Schools
CSS2 Specification via Eric Meyer
CSS Properties from Web Design Group

All done?

Save your changes, and show your final navigation menu to your instructor before starting the next module.